<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>商品页面</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/goods.css" type="text/css">
	<link rel="stylesheet" href="style/common.css" type="text/css">
	<link rel="stylesheet" href="style/bottomnav.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">
	<!--引入jqzoom css -->
	<link rel="stylesheet" href="style/jqzoom.css" type="text/css">
	<!-- <script type="text/javascript" src="js/layer/layer.js"></script> -->
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/header.js"></script>
	<script type="text/javascript" src="js/goods.js"></script>
	<script type="text/javascript" src="js/jqzoom-core.js"></script>
	<script type="text/javascript" src="js/goods_wb.js"></script>


	<script type="text/javascript">

        // $(function(){
        //     $('.jqzoom').jqzoom({
        //         zoomType: 'standard',
        //         lens:true,
        //         preloadImages: false,
        //         alwaysOn:false,
        //         title:false,
        //         zoomWidth:400,
        //         zoomHeight:400
        //     });
        // })
	</script>
</head>

<body>


	<span id="newheader"></span>
	<script src="js/newheader.js"></script>
	<!-- 商品页面主体 start -->
	<div class="main w1210 mt10 bc" style="border:1px  solid  blue">
		<!-- 面包屑导航 start -->
		<div class="breadcrumb">
			<h2>当前位置：<a href="">首页</a> >>
				<!-- <a href="">电脑、办公</a> > <a href="">笔记本</a>  -->
				<span class="store_name"></span></h2>
		</div>
		<!-- 面包屑导航 end -->

		<!-- 主体页面左侧内容 start -->
		<div class="goods_left fl">
			<!-- 相关分类 start -->
			<div class="related_cat leftbar mt10">
				<h2><strong>相关分类</strong></h2>
				<div class="leftbar_wrap">
					<ul id="relevant-class">


					</ul>
				</div>
			</div>
			<!-- 相关分类 end -->

			<!-- 同类品牌 start -->
			<div class="related_cat	leftbar mt10">
				<h2><strong>同类品牌</strong></h2>
				<div class="leftbar_wrap">
					<ul id="same-brand">


					</ul>
				</div>
			</div>
			<!-- 相关品牌 end -->

			<!-- 热销排行 start -->
			<div class="hotgoods leftbar mt10">
				<h2><strong>热销排行榜</strong></h2>
				<div class="leftbar_wrap">
					<ul id="hot-sale">


					</ul>
				</div>
			</div>
			<!-- 热销排行 end -->


			<!-- 浏览过该商品的人还浏览了  start 注：因为和list页面newgoods样式相同，故加入了该class -->
			<!-- 			<div class="related_view newgoods leftbar mt10">
				<h2><strong>浏览了该商品的用户还浏览了</strong></h2>
				<div class="leftbar_wrap">
					<ul>
						<li>
							<dl>
								<dt><a href=""><img src="images/relate_view1.jpg" alt="" /></a></dt>
								<dd><a href="">ThinkPad E431(62771A7) 14英寸笔记本电脑 (i5-3230 4G 1TB 2G独显 蓝牙 win8)</a></dd>
								<dd><strong>￥5199.00</strong></dd>
							</dl>
						</li>

						<li>
							<dl>
								<dt><a href=""><img src="images/relate_view2.jpg" alt="" /></a></dt>
								<dd><a href="">ThinkPad X230i(2306-3V9） 12.5英寸笔记本电脑 （i3-3120M 4GB 500GB 7200转 蓝牙 摄像头 Win8）</a></dd>
								<dd><strong>￥5199.00</strong></dd>
							</dl>
						</li>

				
					</ul>
				</div>
			</div>  -->
			<!-- 浏览过该商品的人还浏览了  end -->

			<!-- 最近浏览 start -->
			<!-- 			<div class="viewd leftbar mt10">预计不要
				<h2><a href="">清空</a><strong>最近浏览过的商品</strong></h2>
				<div class="leftbar_wrap">
					<dl>
						<dt><a href=""><img src="images/hpG4.jpg" alt="" /></a></dt>
						<dd><a href="">惠普G4-1332TX 14英寸笔记...</a></dd>
					</dl>

					<dl class="last">
						<dt><a href=""><img src="images/crazy4.jpg" alt="" /></a></dt>
						<dd><a href="">直降200元！TCL正1.5匹空调</a></dd>
					</dl>
				</div>
			</div> -->
			<!-- 最近浏览 end -->

		</div>
		<!-- 主体页面左侧内容 end -->

		<!-- 商品信息内容 start -->
		<div class="goods_content fl mt10 ml10">
			<!-- 商品概要信息 start -->
			<div class="summary">
				<h3><strong id="store_info"> </strong></h3>

				<span id="store_images"></span>
				<!-- 图片预览区域 start -->


				<!-- 图片预览区域 start -->

				<div class="preview fl">
					<div class="midpic" id="store_imagess">
						<!-- <a href="" class="jqzoom" rel="gal1" id="store_images_a"> -->
						<!-- 第一幅图片的大图 class 和 rel属性不能更改 -->
						<img src="" alt="" style="width: 350px;height: 350px" id="store_images_img" /> <!-- 第一幅图片的中图 -->
						<!-- </a> -->

					</div>

					<!--使用说明：此处的预览图效果有三种类型的图片，大图，中图，和小图，取得图片之后，分配到模板的时候，把第一幅图片分配到 上面的midpic 中，其中大图分配到 a 标签的href属性，中图分配到 img 的src上。 下面的smallpic 则表示小图区域，格式固定，在 a 标签的 rel属性中，分别指定了中图（smallimage）和大图（largeimage），img标签则显示小图，按此格式循环生成即可，但在第一个li上，要加上cur类，同时在第一个li 的a标签中，添加类 zoomThumbActive  -->

					<div class="smallpic">
						<a href="javascript:;" id="backward" class="off"></a>
						<a href="javascript:;" id="forward" class="on"></a>
						<div class="smallpic_wrap">
							<ul id="store_image">
								<!-- 
                                <li class="cur">
                                    <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: 'images/preview_m1.jpg',largeimage: 'images/preview_l1.jpg'}"><img src="images/preview_s1.jpg"></a>
                                </li>

                                <li>
                                    <a href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: 'images/preview_m2.jpg',largeimage: 'images/preview_l2.jpg'}">
                                    <img src="images/preview_s2.jpg"></a>
                                </li> -->

							</ul>
						</div>

					</div>
				</div>
				<!-- 图片预览区域 end -->

				<!-- 商品基本信息区域 start -->
				<div class="goodsinfo fl ml10">
					<ul>
						<li>商品名称:<b class="store_name"></b></li>
						<li class="store_product_id"></li>
						<li class="market_price"><span>定价：</span><em id="store_ot_price"></em></li>
						<li class="shop_price"><span>本店价：</span> <strong id="store_price"> </strong>
							<!-- <a href="">(降价通知)</a> -->
						</li>
						<!-- <li><span>上架时间：</span>2012-09-12</li> -->
						<!-- <li class="star"><span>商品评分：</span> <strong></strong><a href="">(已有21人评价)</a></li> -->
						<!-- 此处的星级切换css即可 默认为5星 star4 表示4星 star3 表示3星 star2表示2星 star1表示1星 -->
					</ul>

					<form action="" method="post" class="choose">
						<ul id="product_style">

							<!-- 							<li class="product">
								<dl>
									<dt>款式：</dt>
									<dd>
								
									<a class="selected" href="javascript:;">黑色 <input type="radio" name="color" value="黑色"  /></a>
										<a href="javascript:;">白色 <input type="radio" name="color" value="白色" /></a>
										<a href="javascript:;">蓝色 <input type="radio" name="color" value="蓝色" /></a>
										<input type="hidden" name="" value="" />
									</dd>
								</dl>
							</li> -->

							<!-- 							<li class="product">
								<dl>
									<dt>版本：</dt>
									<dd>
										<a href="javascript:;">i3 4G内存版 <input type="radio" name="ver" value="" /></a>
										<a href="javascript:;">i5 4G内存版 <input type="radio" name="ver" value=""  /></a>
										<a class="selected" href="javascript:;">i5 8G内存版<input type="radio" name="ver" value="" checked="checked" /></a>
										<a href="javascript:;">SSD超极本 <input type="radio" name="ver" value="" /></a>
										<input type="hidden" name="" value="" />
									</dd>
								</dl>
							</li> -->

							<li>
								<dl>
									<dt>购买数量：</dt>
									<dd id="specialdd" style="display: flex;justify-content: left;align-items: center;">
										<a href="javascript:;" id="reduce_num"></a>
										<input type="text" name="amount" value="1" class="amount" />
										<a href="javascript:;" id="add_num"></a>
									</dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt>&nbsp;</dt>
									<dd>
										<!-- <input type="submit" value="" class="add_btn" /> -->
										<input type="" value="" class="add_btn" />
										<img id="goshop" src="images/go_shop.jpg"
											style="margin-left: 220px; margin-top: -38px;">
									</dd>
								</dl>
							</li>

						</ul>
					</form>
				</div>
				<!-- 商品基本信息区域 end -->
			</div>
			<!-- 商品概要信息 end -->

			<div style="clear:both;"></div>

			<!-- 商品详情 start -->
			<div class="detail">
				<div class="detail_hd">
					<ul>
						<li class="first on"><span>商品介绍</span></li>
						<li class=""><span>商品评价</span></li>
						<li><span>售后保障</span></li>
					</ul>
				</div>
				<div class="detail_bd">
					<!-- 商品介绍 start -->
					<div class="introduce detail_div">
						<div class="attr mt15">
							<ul id="product_presentation">
								<li><span>商品名称：</span><span class="store_name"></span></li>
								<li><span class="store_product_id"></li>

							</ul>
						</div>

						<div class="desc mt10">

						</div>
					</div>
					<!-- 商品介绍 end -->

					<!-- 商品评论 start -->
					<div class="comment detail_div mt10">
						<div class="comment_summary">
							<div class="rate fl">
								<strong><em>90</em>%</strong> <br />
								<span>好评度</span>
							</div>
							<div class="percent fl">
								<dl>
									<dt>好评（90%）</dt>
									<dd>
										<div style="width:90px;"></div>
									</dd>
								</dl>
								<dl>
									<dt>中评（5%）</dt>
									<dd>
										<div style="width:5px;"></div>
									</dd>
								</dl>
								<dl>
									<dt>差评（5%）</dt>
									<dd>
										<div style="width:5px;"></div>
									</dd>
								</dl>
							</div>
							<div class="buyer fl">
								<dl>
									<dt>买家印象：</dt>
									<dd><span>屏幕大</span><em>(1953)</em></dd>
									<dd><span>外观漂亮</span><em>(786)</em></dd>
									<dd><span>系统流畅</span><em>(1091)</em></dd>
									<dd><span>功能齐全</span><em>(1109)</em></dd>
									<dd><span>反应快</span><em>(659)</em></dd>
									<dd><span>分辨率高</span><em>(824)</em></dd>
								</dl>
							</div>
						</div>
						<div style="border:1px   solid red">
							<div    style=" margin:10px;border:1px   solid  blue">
								<!----第一层-->
								<div style="display: flex;justify-content: left;align-items: center;">
									<img id="userimage" style="width:40px;height:40px;border-radius: 20px;"
										src="images/1.png" alt="">
									<div id="username" style="font-size: 16px;margin:0 10px;font-weight: 500;">刘</div>
									<div id="score" style="font-size: 16px;">用户评分：5</div>
								</div>
								<div style="display: flex;margin:7px;color:#82848f">
									<div id="timeid">2020-10-27</div>
								</div>
								<div style="margin:7px" id="discuss">好很好</div>
							</div>
						</div>

						<!-- 分页信息 end -->
					</div>
					<!-- 商品评论 end -->
					<!--客户对商家的评论列表--->
				

					<!-- 售后保障 start -->
					<div class="after_sale mt15 none detail_div">
						<div>
							<p>本产品全国联保，享受三包服务，质保期为：一年质保
								<br />如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！</p>
							<p>售后服务电话：800-898-9006 <br />品牌官方网站：http://www.lenovo.com.cn/</p>

						</div>

						<div>
							<h3>服务承诺：</h3>
							<p>本商城向您保证所售商品均为正品行货，京东自营商品自带机打发票，与商品一起寄送。凭质保证书及京东商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由本商城联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。本商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！
							</p>

							<p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
							</p>

						</div>

						<div>
							<h3>权利声明：</h3>
							<p>本商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东商城重要的经营资源，未经许可，禁止非法转载使用。</p>
							<p>注：本站商品信息均来自于厂商，其真实性、准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。</p>

						</div>
					</div>
					<!-- 售后保障 end -->

				</div>
			</div>
			<!-- 商品详情 end -->


		</div>
		<!-- 商品信息内容 end -->


	</div>
	<!-- 商品页面主体 end -->


	<div style="clear:both;"></div>


	<!--<div style="clear:both;"></div>-->
	<span id="newfooter"></span>
	<script src="js/footer.js"></script>
	<script type="text/javascript">
		document.execCommand("BackgroundImageCache", false, true);
	</script>


</body>

</html>

<!-- jqzoom 效果 -->
<script type="text/javascript">

</script>